<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--设备数据-->
			<el-form :model="device" ref="device" :rules="rules" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-col :span="24" :xs="24">
					<el-form-item label="设备" prop="type">
						<el-select v-model="device.type" placeholder="设备类型" clearable style="width: 240px">
							<el-option v-for="device in types" :key="device.value" :label="device.label"
								:value="device.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24" :xs="24">
					<el-form-item label="SN" prop="sn">
						<el-input min-width="200px" type="primary" v-model="device.sn" :readonly="device.readonly" />
					</el-form-item>
				</el-col>

				<el-col :span="24" :xs="24">
					<el-form-item label="名称" prop="name">
						<el-input min-width="200px" type="primary" v-model="device.name" />
					</el-form-item>
				</el-col>

				<el-col :span="24" :xs="24">
					<el-form-item label="地址" prop="address">
						<el-input min-width="200px" type="primary" v-model="device.address" />
					</el-form-item>
				</el-col>

				<el-col :span="24" :xs="24">
					<el-form-item>
						<el-button type="primary" size="mini" @click="handle">{{btn}}</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
	</div>
</template>

<script>
	import {
		bind,
		update
	} from "@/api/device/device";
	export default {
		props: ['sn'], // 接收的 props 名称
		data() {
			return {
				// 显示搜索条件
				showSearch: true,
				// 查询参数
				device: {
					type: "charger",
					readonly: false,
					sn: "",
					name: "",
					address: "",
				},
				btn: "",
				types: [],
				// types: [{
				// 		value: 'charger',
				// 		label: '充电桩'
				// 	}, {
				// 		value: 'ups',
				// 		label: 'UPS'
				// 	},
				// 	{
				// 		value: 'inverter',
				// 		label: '逆变器'
				// 	},
				// ],
				rules: {},
				rules_bind: {
					sn: [{
						required: true,
						trigger: "blur",
						message: "请输入SN码"
					}, ],
				},
				rules_update: {
					name: [{
						required: true,
						trigger: "blur",
						message: "设备名称不能为空"
					}, ],
				}
			};
		},
		watch: {

		},
		created() {
			// this.getList();
			// this.getDeptTree();
			// this.getConfigKey("sys.user.initPassword").then(response => {
			// 	this.initPassword = response.msg;
			// });
		},
		mounted() {
			this.types = this.$route.query.types
			this.btn = this.$route.query.btn

			if (this.btn === "绑定") {
				this.rules = this.rules_bind
			} else {
				this.rules = this.rules_update
			}
			//如果带参数过来,就是更新,否则就是绑定
			if (this.$route.query.sn) {
				this.device.sn = this.$route.query.sn;
				this.device.readonly = true
			}
			if (this.$route.query.name) {
				this.device.name = this.$route.query.name;
			}
			if (this.$route.query.address) {
				this.device.address = this.$route.query.address;
			}
		},
		methods: {
			handle() {
				if (this.btn === "绑定") {
					this.$refs.device.validate(valid => {
						if (valid) {
							bind(this.device).then(res => {
								console.log("res=" + JSON.stringify(res));
								this.$modal.msgSuccess("绑定成功");
							});
						}
					});
				} else {
					this.$refs.device.validate(valid => {
						if (valid) {
							update(this.device).then(res => {
								console.log("res=" + JSON.stringify(res));
								this.$modal.msgSuccess("修改成功");
							});
						}
					});
				}
			}
		}
	};
</script>